<template>
    <div>

      <div id="search">
        <input type="text" class="search_frame" placeholder="	填写需要查询的汉字"  v-model="value">
        <img src="../../../static/images/search_logo.png" alt="" class="search_logo" @click="query">
      </div>

    </div>
</template>

<script>
  import {mapState, mapMutations,mapActions} from 'vuex';
  export default {
    name: "",
    data() {
      return {
        value:"",

      };
    },
    // 可请求数据
    created() {

    },
    //绑定dom对象
    mounted(){

     },
    // 计算函数
    computed: {


    },
    // 方法
    methods: {
      query(){
        const url = "./details/main?size="+encodeURIComponent(this.value);
        wx.navigateTo({ url });

      }

    }
    ,
     // 子组件
    components: {

    }
  };
</script>

<style scoped>
  ul li{

    float: left;

  }
  .tui-picker-content{
    padding: 30px;
    text-align: center;
  }
  .tui-picker-name{
    height: 80px;
    line-height: 80px;
  }
  .tui-picker-detail{
    height: 80px;
    line-height: 80px;
    background-color: #fff;
    font-size: 25px;
    padding: 0 10px;

  }
  #search{
    width: 100%;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -40px;
    padding: 0 50px 0 20px;
    box-sizing: border-box;
  }
  .search_frame{
    width: 100%;
    height: 100%;
    border: 1px solid #cccc;
    box-sizing: border-box;
     padding: 0 10px;

  }
  .search_logo{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 7px;
    margin-top: -15px;
  }

</style>
